<template>
	<view class="feedback">
		<template v-if="state">
		<view class="swiper-jilu" v-if="feedbackData.length != 0">
			<uni-card :key="item.id" v-for="item in feedbackData" :is-shadow="false" :border="false" :margin="'20rpx'" :spacing="'20rpx 40rpx'" :padding="0" >
			    <view slot="title" class="card-title">
					<text class="c-t-text">{{item.create_time || ''}}</text>
					<text class="c-t-text" :class="['','c-t-text1','c-t-text2','c-t-text3'][item.status]">{{['待审核','审核中','审核通过','审核未通过'][item.status]}}</text>
				</view>
				<uni-list :border="false">
			    	<uni-list-item :border="false">
						<view slot="header" class="slot-wt">问题：</view>
						<text slot="body" class="slot-wt text">{{item.content || ''}}</text>
					</uni-list-item>
					<uni-list-item :border="false" v-if="item.image.length">
						<image slot="body" mode="aspectFill" :src="item.image[0]" style="width: 160rpx;height: 160rpx;" @click="previewImage(item.image)"></image>
					</uni-list-item>
					<uni-list-item :border="false" v-if="item.platform_opinion != ''">
						<view slot="header" class="slot-hf">平台回复：</view>
						<text slot="body" class="slot-hf text">{{item.platform_opinion || ''}}</text>
					</uni-list-item>
			    </uni-list>
			</uni-card>
			<uni-load-more iconType="auto" :status="status" @clickLoadMore="clickLoadMore" :content-text="contentText" />
		</view>
		</template>
		<view style="width: 100%;display: flex;flex-direction: column;justify-content: center;align-items: center;height:100%;" v-else>
			<image :src="imgUrl" style="width: 350rpx;height:291rpx;margin-bottom: 36rpx;"></image>
			<text style="font-size: 32rpx;font-weight: 500;color: #777777;margin-bottom: 120rpx;">暂无数据!</text>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				imgUrl:`${getApp().globalData.imgScr}jd/dingdankongzhuangtai.png`,
				feedbackData:[], //  反馈记录数据
				state:true, // 默认状态
				page:1, // 初始页码
				total:0, // 数据总条数
				status: 'more', // 加载状态
				contentText: { // 加载状态对应的提示语
					contentdown: '点击加载更多数据',
					contentrefresh: '正在加载中...',
					contentnomore: '没有更多数据'
				}
			};
		},
		onLoad() {
			this.getClick()
		},
		onPullDownRefresh() {
			let _this = this
				// 下拉刷新时触发
				setTimeout(function () {
					uni.showToast({
						title:"刷新成功",
						icon:"none"
					})
					// 重置 data() 数据
					Object.assign(_this.$data, _this.$options.data())
					_this.getClick()
				    uni.stopPullDownRefresh();
				}, 1000);
		    },
		methods: {
			/**
			 * @param {arr} urls 需要预览的图片
			 */
			previewImage(urls) {
				uni.previewImage({
					urls,
					success: function(e) {
						
					},
					fail: function(e) {
					    uni.showToast({
					    	title: e.errMsg,
					    	icon:"none"
					    })
					}
				})
			},
			/**
			 * @param {Object} e 加载更多的状态 
			 */
			async clickLoadMore(e) {
				if(e.detail.status == 'no-more') return this.status = 'no-more'
				this.status = 'loading'
				this.page += 1
				this.getClick(this.page)
			},
			/**
			 * 反馈记录请求数据
			 */
			async getClick(page=1,limit = 10) {
				let _this = this
				try{
					let res = await this.$http.post('/index/Hotelorder/complaint',{
						page:page,
						limit:limit,
					})
					this.feedbackData = [...this.feedbackData,...res.data]
					this.state = this.feedbackData.length
					this.total = res.total
					if(this.page >= res.last_page) return this.status = 'no-more'
					this.status = 'more'
				}catch(e){
					//TODO handle the exception
					uni.showToast({
						title: e.errMsg,
						icon:"none"
					})
				}
			},
		},
	}
</script>

<style lang="scss">
	.feedback {
		flex: 1;
		flex-direction: column;
		overflow: hidden;
		height: 100vh;
	.uni-card {
		border-radius: 20rpx;
		.uni-card__header {
			padding: 20rpx 0;
			border-bottom: 1rpx solid #EDEDED;
			font-size: 28rpx;
			color: #000000;
			font-weight: 600;
		}
		.p-input {
			width: 100%;
		}
	}
	.swiper-jilu {
		height: 100%;
		overflow: auto;
		.card-title {
			display: flex;
			justify-content: space-between;
			align-items: center;
			padding: 20rpx 0;
			border-bottom: 1px solid #EDEDED;
			.c-t-text {
				font-size: 24rpx;
				font-weight: 500;
				color: rgba($color: #000000, $alpha: 0.5);
			}
			.c-t-text1 {
				color: #2b9bff;
			}
			.c-t-text2 {
				color: #8dc9f1;
			}
			.c-t-text3 {
				color: #FF4B4B;
			}
		}
		.slot-wt {
			font-size: 28rpx;
			font-weight: 500;
			color: #000000;
		}
		.uni-list-item {
			margin-bottom: 20rpx;
		}
		.uni-list-item__container {
			padding: 0;
		}
		.uni-list {
			padding: 20rpx 0;
		}
		.text {
			flex: 1;
			margin-left: 20rpx;
		}
		.slot-hf {
			font-size: 24rpx;
			font-weight: 500;
			color: #8dc9f1;
		}
	}
		
}	
</style>
